<template>
  <div class="room">
    <!--<jm-head></jm-head>-->
    <section class="my_header">
      <section @click = "gotoback()" class="my_header_left">
        <i class="icon_style iconfont icon-arrowleft"></i>
        <button class="back">返回</button>
      </section>
      <section class="my_header_center">
        <span>{{$store.state.roomDetail.name}}</span>
      </section>
      <section class="my_header_right">
        <i class="icon_style iconfont icon-category" @click="showRoom"></i>
      </section>
    </section>
    <section class="center">

      <section class="nav">
        <section class="nav-item"
                 @click="selected = 1">
          <span :class="{'is-selected': selected === 1}">文章</span>
        </section>
        <section class="nav-item"
                 @click="selected = 2">
          <span :class="{'is-selected': selected === 2}">相册</span>
        </section>
      </section>

      <ul class="post_list_ul" v-infinite-scroll="loadMorePost"
          infinite-scroll-disabled="artilceLoading"
          infinite-scroll-distance="10"  v-show="this.selected === 1">
        <li class="post_list_li" v-for="item in artilceList" :key="item.id" @click="showArticle(item)">
          <section class="li_top">
            <section class="li_top_left"><i class="icon_style iconfont icon-brush_fill"></i></section>
            <section class="li_top_right">{{item.createTime | time}}</section>
          </section>

          <section class="li_center">
            <section class="li_left">
              <section class="top_line"></section>
              <section class="bottom_line"></section>
            </section>

            <section class="li_right">
              <section class="top"></section>
              <section class="li_header">
                <section class="li_header_left">
                  <img :src="$store.state.baseImgUrl+item.authorAvatar" alt="" class="avatar">
                </section>
                <section class="li_header_center">
                  <span class="nick">{{item.authorNick}}</span>
                </section>
                <section class="li_header_right">
                  <span class="datetime">{{item.createTime | time}}</span>
                </section>
              </section>

              <section class="li_center">
                <section :class="[item.cover3 !== null && item.cover3 !==''? 'li_center_container' : 'li_center_container_active']">
                  <span class="container" v-html="item.title"></span>
                  <span v-show="item.cover1 !== null && item.cover1 !==''" class="img_show">
                <img v-show="item.cover1 !== null && item.cover1 !==''" :src="item.cover1" alt="" class="img_show_item">
                <img v-show="item.cover3 !== null && item.cover3 !==''" :src="item.cover2" alt="" class="img_show_item">
                <img v-show="item.cover3 !== null && item.cover3 !==''" :src="item.cover3" alt="" class="img_show_item">
              </span>
                </section>
              </section>

              <section class="li_footer">
                <section class="li_footer_item">
                  <i class="icon_style iconfont icon-zan">点赞：</i>
                  <span>{{item.upvoteCount}}</span>
                </section>
                <section class="li_footer_item">
                  <i class="icon_style iconfont icon-xiaoxizhongxin">评论：</i>
                  <span>{{item.commentCount}}</span>
                </section>
                <section class="li_footer_item">
                  <i class="icon_style iconfont icon-jushoucang">收藏：</i>
                  <span>{{item.likeCount}}</span>
                </section>
              </section>
            </section>
          </section>
          <section class="li_bottom"></section>
        </li>
      </ul>

      <ul class="post_list_ul" v-infinite-scroll="loadMoreAlbum"
          infinite-scroll-disabled="albumLoading"
          infinite-scroll-distance="10"  v-show="this.selected === 2">
        <li class="post_list_li" v-for="item in albumList" :key="item.id" @click="showAlbumDetail(item)">
          <section class="li_header" >
            <section class="cover_box">
              <img :src="$store.state.baseImgUrl+item.cover1" alt="" class="cover_img">
            </section>
          </section>

          <section class="album_li_center">
            <section class="album_li_center_item"><span>相册名：</span>{{item.albumTitle}}</section>
            <section class="album_li_center_item">{{item.albumDesc}}</section>
          </section>
        </li>
      </ul>

      <p class="load_content" v-show="!startShowLoading && showLoading">
        <spinner class="load_icon" type="snake"></spinner>
      </p>
    </section>


    <jm-footer></jm-footer>

    <transition name="loading">
      <spinner class="load_icon" type="snake" v-show="startShowLoading"></spinner>
    </transition>
    <transition name="router-slid" mode="out-in">
      <router-view></router-view>
    </transition>



  </div>
</template>

<script>
  import {mapState, mapMutations} from 'vuex'
  import JmFooter from '../../components/footer/Footer';
  import { Spinner, Toast } from 'mint-ui'


  export default {
    data () {
      return {
        selected:1,
        artilceList:[],
        artilceOffset: 0,
        artilceLoading: false,
        albumList:[],
        albumOffset: 0,
        albumLoading: false,
        result: null,
        preventRepeat: false,
        showLoading: true,
        startShowLoading: true,

      }
    },
    mounted () {
//    this.startLoad();
    },
    computed: {
    },
    methods: {
      ...mapMutations([
        'SAVE_ARTICLE',
        'SAVE_ALBUM'
      ]),
      gotoback(){
        this.$router.go(-1)
      },
      async loadMorePost(){
        console.log("load....");
        this.artilceLoading = true;

        //获取信息
        let res = null;
        let url = '/v1/article?userId=' + this.$store.state.userInfo.userId
            + '&roomId=' + this.$store.state.roomDetail.id
          + '&orderBy=1&desc=-1'
          + '&start=' + this.artilceOffset
          + '&length=' + this.$store.state.length
        await this.axios.get(url)
          .then(response => {
            res = response.data;
          })
        if (res.success){
          this.startShowLoading = false;
        }
        if (res.result.length > 0){
          this.artilceOffset += res.result.length;
          this.artilceList = [...this.artilceList, ...res.result];
          this.artilceLoading = false;
        }

        if (res.result.length < this.$store.state.length) {
          this.showLoading = false;
          return
        }
      },

      async loadMoreAlbum(){
        console.log("load....");
        this.albumLoading = true;

        //获取信息
        let res = null;
        let url = '/v1/album?roomId=' + this.$store.state.roomDetail.id
          + '&start=' + this.albumOffset
          + '&length=' + this.$store.state.length
        await this.axios.get(url)
          .then(response => {
            res = response.data;
          })
        if (res.success){
          this.startShowLoading = false;
        }
        if (res.result.length > 0){
          this.albumOffset += res.result.length;
          this.albumList = [...this.albumList, ...res.result];
          this.albumLoading = false;
        }

        if (res.result.length < this.$store.state.length) {
          this.showLoading = false;
          return
        }
      },
      showRoom(item){
        this.preventRepeat = false;
        this.$router.push('/room_info');
      },
      showArticle(item){
        this.SAVE_ARTICLE(item);
        this.preventRepeat = false;
        this.$router.push('/article');

      },
      showAlbumDetail(item){
        this.SAVE_ALBUM(item);
        this.preventRepeat = false;
        this.$router.push('/photo');
      },

    },
    components:{
      Spinner,
      JmFooter
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
  .mint-toast-text{
    font-size: 0.6rem;
  }
  .toast{
    min-width: 20%;
    width: 20%;
    span{
      color: #FFFFFF;
    }
  }
</style>

<style lang="scss" scoped>
  @import '../../style/mixin';

  .my_header{
    background-color: #33CCFF;
    height: 1.5rem;
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding-top: 0.2rem;
    z-index: 100;
    .my_header_left{
      flex: 1;
      margin-left: 0.5rem;

      .icon_style{
        font-size: 0.6rem;
        font-weight: bold;
      }

      .back{
        background-color: transparent;
        font-size: 0.65rem;
        margin: 0;
      }
    }
    .my_header_center{
      flex: 2;
      display: flex;
      text-align: center;
      flex-direction: column;
      align-items: center;
      span{

      }
    }
    .my_header_right{
      flex: 1;
      text-align: right;
      margin-right: 0.5rem;
      .icon_style{
        font-size: 0.65rem;
        font-weight: bold;
        position: relative;
        top: -0.06rem;
      }
    }

  }

  .load_icon{
    display: inline-block;
    height: 100%;
    width: 100%;
    position: relative;
    margin: 0 auto;

  }
  .load_content{
    height: 45px;
    width: 100%;
  }


  .center{
    padding-top: 2.38rem;
    padding-bottom: 2rem;
    overflow: hidden;
  }

  .nav{
    background-color: #eaeaea;
    position: fixed;
    z-index: 100;
    left: 0;
    right: 0;
    top: 1.5rem;
    @include wh(100%, 0.88rem);
    display: flex;
    box-shadow: 0 -0.026667rem 0.053333rem rgba(0,0,0,.1);

    .nav-item{
      flex: 1;
      display: flex;
      text-align: center;
      flex-direction: column;
      align-items: center;
      @include sc(.5rem, #666);

      span{
        margin: auto auto;
      }

      .is-selected{
        color: #33CCFF;
      }
    }
  }

  .cover{

  }

  .post_list_ul{

    .post_list_li{
      border: solid 1px #d7dde4;
      @include borderRadius(0.1rem);
      border-bottom: solid 10px #eaeaea;

      .li_header{
        .cover_box{
          .cover_img{
            height: 6rem;
          }
        }
      }

      .album_li_center{

        .album_li_center_item{
          font-size: 0.6rem;
          margin: 2px 10px;
        }

      }

      .li_top{
        display: flex;
        .li_top_left{
          @include wh(1rem,1rem);
          border: solid 1px #33CCFF;
          @include borderRadius(50%);
          line-height: 0.7rem;
          text-align: center;
          .icon_style{
            font-size: 0.6rem;
            color: #33CCFF;
          }
        }
        .li_top_right{
          font-size: 0.6rem;
          font-weight: bold;
          color: #222;
          padding-top: 0.1rem;
          padding-left: 0.3rem;
        }
      }

      .li_bottom{

      }
      .li_center{
        display: flex;
        width: 100%;

        .li_left{
          flex: 1;
          position: relative;
          left: 0.5rem;
          .top_line{
          }
          .bottom_line{
            height: 100%;
            width: 1px;
            border: solid 0.5px #333;
          }


        }


        .li_right{
          flex: 10;
          display: flex;
          /*text-align: center;*/
          flex-direction: column;
          align-items: center;

          /*单个文章节点头部 开始*/
          .li_header{
            @include wh(100%, 1.6rem);
            border-bottom: solid 1px #e3e8ee;
            display: flex;

            .li_header_left{
              display: inline-block;
              margin: 0rem 0.5rem;

              .avatar{
                @include wh(1.3rem, 1.3rem);
                @include borderRadius(0.65rem);
                margin-top: 0.15rem;
              }
            }

            .li_header_center{
              flex-direction: column;
              align-items: center;
              display: inline-block;
              margin: auto 0.2rem;
              .nick{
                margin: auto 0;
                font-size: 0.6rem;
                font-weight: bold;
              }

            }

            .li_header_right{
              flex-direction: column;
              align-items: center;
              display: inline-block;
              margin: auto 0.2rem;

              .datetime{
                margin: auto 0;
                font-size: 0.4rem;
                font-weight: bold;
              }
            }
          }


          /* 单个节点中部，内容部分  开始*/
          .li_center{
            width: 100%;
            padding: 0.2rem 0.5rem;
            display: flex;


            .li_center_container{
              background-color: #FFFFFF;
              padding: 0.3rem;
              width: 100%;

              .img_show{
                display: flex;
                .img_show_item{
                  flex: 1;
                  display: flex;
                  text-align: center;
                  flex-direction: column;
                  align-items: center;
                  margin: 0 0.05rem;
                  display: inline-block;
                  @include wh(0rem, 3.2rem);
                }
              }
            }
            .li_center_container_active{
              background-color: #FFFFFF;
              padding: 0.3rem;
              display: flex;
              width: 100%;


              .container{
                flex: 2;
                display: flex;
                flex-direction: column;
              }

              .img_show{
                flex: 1;
                display: flex;
                .img_show_item{
                  @include wh(100%, 3.2rem);
                }
              }
            }

          }

          /* 单个节点尾部  开始*/
          .li_footer{
            border-top: solid 1px #e3e8ee;
            padding-left: 0.5rem;
            display: flex;
            width: 100%;

            .li_footer_item{
              flex: 1;
              display: flex;
              /*text-align: center;*/
              /*flex-direction: column;*/
              align-items: center;

              .icon_style{
                font-size: 0.6rem;
                display: inline-block;
              }

              .is-selected{
                color: #33CCFF;
              }
            }

          }
        }
      }

    }
  }


  span,input{
    font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
  }





</style>
